import React from 'react'
import { Tabs } from 'antd';

function ImgTab() {

  const items = [
    {
      key: '1',
      label: '节日热点',
      children: <>
        <div style={{ width: "18%", float: 'left', height: '280px', background: '#f5f7fd', margin: '0.7rem', display: 'flex', justifyContent: 'center', alignItems: 'center', borderRadius: '5%' }}>
          <img src="https://pub-cdn-oss.chuangkit.com/materials/2024/12/17/fb239c61-e933-4dc1-9658-88b177ac7d44" alt="" style={{ width: "0 auto", height: 'auto', maxWidth: '80%', maxHeight: '70%' }}/>
        </div>
         <div style={{ width: "18%", float: 'left', height: '280px', background: '#f5f7fd', margin: '0.7rem', display: 'flex', justifyContent: 'center', alignItems: 'center', borderRadius: '5%' }}>
          <img src="https://pub-cdn-oss.chuangkit.com/material_kind/material_third_kind/background_image/583?imageMogr2%2Fthumbnail%2F600x%3E%2Fformat%2Fwebp" alt="" style={{ width: "0 auto", height: 'auto', maxWidth: '80%', maxHeight: '70%' }}/>
        </div>
         <div style={{ width: "18%", float: 'left', height: '280px', background: '#f5f7fd', margin: '0.7rem', display: 'flex', justifyContent: 'center', alignItems: 'center', borderRadius: '5%' }}>
          <img src="https://pub-cdn-oss.chuangkit.com/material_kind/material_third_kind/background_image/638?imageMogr2%2Fthumbnail%2F600x%3E%2Fformat%2Fwebp" alt="" style={{ width: "0 auto", height: 'auto', maxWidth: '80%', maxHeight: '70%' }}/>
        </div>
         <div style={{ width: "18%", float: 'left', height: '280px', background: '#f5f7fd', margin: '0.7rem', display: 'flex', justifyContent: 'center', alignItems: 'center', borderRadius: '5%' }}>
          <img src="https://pub-cdn-oss.chuangkit.com/materials/2024/12/17/fb239c61-e933-4dc1-9658-88b177ac7d44" alt="" style={{ width: "0 auto", height: 'auto', maxWidth: '80%', maxHeight: '70%' }}/>
        </div>
      </>,
    },
    {
      key: '2',
      label: '贴纸元素',
      children: <>
        <div style={{ width: "18%", float: 'left', height: '280px', background: '#f5f7fd', margin: '0.7rem', display: 'flex', justifyContent: 'center', alignItems: 'center', borderRadius: '5%' }}>
          <img src="https://pub-cdn-oss.chuangkit.com/materials/2024/12/17/fb239c61-e933-4dc1-9658-88b177ac7d44" alt="" style={{ width: "0 auto", height: 'auto', maxWidth: '80%', maxHeight: '70%' }}/>
        </div>
         <div style={{ width: "18%", float: 'left', height: '280px', background: '#f5f7fd', margin: '0.7rem', display: 'flex', justifyContent: 'center', alignItems: 'center', borderRadius: '5%' }}>
          <img src="https://pub-cdn-oss.chuangkit.com/material_kind/material_third_kind/background_image/638?imageMogr2%2Fthumbnail%2F600x%3E%2Fformat%2Fwebp" alt="" style={{ width: "0 auto", height: 'auto', maxWidth: '80%', maxHeight: '70%' }}/>
        </div>
         <div style={{ width: "18%", float: 'left', height: '280px', background: '#f5f7fd', margin: '0.7rem', display: 'flex', justifyContent: 'center', alignItems: 'center', borderRadius: '5%' }}>
          <img src="https://pub-cdn-oss.chuangkit.com/materials/2024/12/17/fb239c61-e933-4dc1-9658-88b177ac7d44" alt="" style={{ width: "0 auto", height: 'auto', maxWidth: '80%', maxHeight: '70%' }}/>
        </div>
         <div style={{ width: "18%", float: 'left', height: '280px', background: '#f5f7fd', margin: '0.7rem', display: 'flex', justifyContent: 'center', alignItems: 'center', borderRadius: '5%' }}>
          <img src="https://pub-cdn-oss.chuangkit.com/material_kind/material_third_kind/background_image/583?imageMogr2%2Fthumbnail%2F600x%3E%2Fformat%2Fwebp" alt="" style={{ width: "0 auto", height: 'auto', maxWidth: '80%', maxHeight: '70%' }}/>
        </div>
         <div style={{ width: "18%", float: 'left', height: '280px', background: '#f5f7fd', margin: '0.7rem', display: 'flex', justifyContent: 'center', alignItems: 'center', borderRadius: '5%' }}>
          <img src="https://pub-cdn-oss.chuangkit.com/materials/2024/12/17/fb239c61-e933-4dc1-9658-88b177ac7d44" alt="" style={{ width: "0 auto", height: 'auto', maxWidth: '80%', maxHeight: '70%' }}/>
        </div>
      </>,
    }, {
      key: '3',
      label: '人物形象',
      children: <>
        <div style={{ width: "18%", float: 'left', height: '280px', background: '#f5f7fd', margin: '0.7rem', display: 'flex', justifyContent: 'center', alignItems: 'center', borderRadius: '5%' }}>
          <img src="https://pub-cdn-oss.chuangkit.com/materials/2024/09/06/da48b4e3-c84b-4c94-89ab-56194dec30fd" alt="" style={{ width: "0 auto", height: 'auto', maxWidth: '80%', maxHeight: '70%' }}/>
        </div>
         <div style={{ width: "18%", float: 'left', height: '280px', background: '#f5f7fd', margin: '0.7rem', display: 'flex', justifyContent: 'center', alignItems: 'center', borderRadius: '5%' }}>
          <img src="https://pub-cdn-oss.chuangkit.com/materials/2024/08/12/fe0f91c2-5f75-4b7d-888d-9172ad9ae321" alt="" style={{ width: "0 auto", height: 'auto', maxWidth: '80%', maxHeight: '70%' }}/>
        </div>
         <div style={{ width: "18%", float: 'left', height: '280px', background: '#f5f7fd', margin: '0.7rem', display: 'flex', justifyContent: 'center', alignItems: 'center', borderRadius: '5%' }}>
          <img src="https://pub-cdn-oss.chuangkit.com/materials/2024/08/05/d7161859-c400-454c-b728-cc04ef9722c2" alt="" style={{ width: "0 auto", height: 'auto', maxWidth: '80%', maxHeight: '70%' }}/>
        </div>
         <div style={{ width: "18%", float: 'left', height: '280px', background: '#f5f7fd', margin: '0.7rem', display: 'flex', justifyContent: 'center', alignItems: 'center', borderRadius: '5%' }}>
          <img src="https://pub-cdn-oss.chuangkit.com/material_kind/material_third_kind/background_image/446?imageMogr2%2Fthumbnail%2F600x%3E%2Fformat%2Fwebp" alt="" style={{ width: "0 auto", height: 'auto', maxWidth: '80%', maxHeight: '70%' }}/>
        </div>
         <div style={{ width: "18%", float: 'left', height: '280px', background: '#f5f7fd', margin: '0.7rem', display: 'flex', justifyContent: 'center', alignItems: 'center', borderRadius: '5%' }}>
          <img src="https://pub-cdn-oss.chuangkit.com/materials/2023/06/08/c291858b-16da-4bbf-b25b-934ae7aa4b65" alt="" style={{ width: "0 auto", height: 'auto', maxWidth: '80%', maxHeight: '70%' }}/>
        </div>
      </>,
    }, {
      key: '4',
      label: '教育培训',
      children: <>
        <div style={{ width: "18%", float: 'left', height: '280px', background: '#f5f7fd', margin: '0.7rem', display: 'flex', justifyContent: 'center', alignItems: 'center', borderRadius: '5%' }}>
          <img src="https://pub-cdn-oss.chuangkit.com/materials/2024/03/09/899c24e8-5b3f-4591-b391-c4206fdff46b" alt="" style={{ width: "0 auto", height: 'auto', maxWidth: '80%', maxHeight: '70%' }}/>
        </div>
         <div style={{ width: "18%", float: 'left', height: '280px', background: '#f5f7fd', margin: '0.7rem', display: 'flex', justifyContent: 'center', alignItems: 'center', borderRadius: '5%' }}>
          <img src="https://pub-cdn-oss.chuangkit.com/materials/2024/12/17/fb239c61-e933-4dc1-9658-88b177ac7d44" alt="" style={{ width: "0 auto", height: 'auto', maxWidth: '80%', maxHeight: '70%' }}/>
        </div>
         <div style={{ width: "18%", float: 'left', height: '280px', background: '#f5f7fd', margin: '0.7rem', display: 'flex', justifyContent: 'center', alignItems: 'center', borderRadius: '5%' }}>
          <img src="https://pub-cdn-oss.chuangkit.com/materials/2024/12/17/fb239c61-e933-4dc1-9658-88b177ac7d44" alt="" style={{ width: "0 auto", height: 'auto', maxWidth: '80%', maxHeight: '70%' }}/>
        </div>
         <div style={{ width: "18%", float: 'left', height: '280px', background: '#f5f7fd', margin: '0.7rem', display: 'flex', justifyContent: 'center', alignItems: 'center', borderRadius: '5%' }}>
          <img src="https://pub-cdn-oss.chuangkit.com/materials/2024/12/17/fb239c61-e933-4dc1-9658-88b177ac7d44" alt="" style={{ width: "0 auto", height: 'auto', maxWidth: '80%', maxHeight: '70%' }}/>
        </div>
         <div style={{ width: "18%", float: 'left', height: '280px', background: '#f5f7fd', margin: '0.7rem', display: 'flex', justifyContent: 'center', alignItems: 'center', borderRadius: '5%' }}>
          <img src="https://pub-cdn-oss.chuangkit.com/materials/2024/12/17/fb239c61-e933-4dc1-9658-88b177ac7d44" alt="" style={{ width: "0 auto", height: 'auto', maxWidth: '80%', maxHeight: '70%' }}/>
        </div>
      </>,
    }, {
      key: '5',
      label: '餐饮美食',
      children: <>
        <div style={{ width: "18%", float: 'left', height: '280px', background: '#f5f7fd', margin: '0.7rem', display: 'flex', justifyContent: 'center', alignItems: 'center', borderRadius: '5%' }}>
          <img src="https://pub-cdn-oss.chuangkit.com/materials/2024/10/06/c6962180-0935-4c60-954d-0073e8dbc62d" alt="" style={{ width: "0 auto", height: 'auto', maxWidth: '80%', maxHeight: '70%' }}/>
        </div>
         <div style={{ width: "18%", float: 'left', height: '280px', background: '#f5f7fd', margin: '0.7rem', display: 'flex', justifyContent: 'center', alignItems: 'center', borderRadius: '5%' }}>
          <img src="https://pub-cdn-oss.chuangkit.com/materials/2024/12/17/fb239c61-e933-4dc1-9658-88b177ac7d44" alt="" style={{ width: "0 auto", height: 'auto', maxWidth: '80%', maxHeight: '70%' }}/>
        </div>
         <div style={{ width: "18%", float: 'left', height: '280px', background: '#f5f7fd', margin: '0.7rem', display: 'flex', justifyContent: 'center', alignItems: 'center', borderRadius: '5%' }}>
          <img src="https://pub-cdn-oss.chuangkit.com/materials/2024/10/06/c6962180-0935-4c60-954d-0073e8dbc62d" alt="" style={{ width: "0 auto", height: 'auto', maxWidth: '80%', maxHeight: '70%' }}/>
        </div>
         <div style={{ width: "18%", float: 'left', height: '280px', background: '#f5f7fd', margin: '0.7rem', display: 'flex', justifyContent: 'center', alignItems: 'center', borderRadius: '5%' }}>
          <img src="https://pub-cdn-oss.chuangkit.com/materials/2024/12/17/fb239c61-e933-4dc1-9658-88b177ac7d44" alt="" style={{ width: "0 auto", height: 'auto', maxWidth: '80%', maxHeight: '70%' }}/>
        </div>
         <div style={{ width: "18%", float: 'left', height: '280px', background: '#f5f7fd', margin: '0.7rem', display: 'flex', justifyContent: 'center', alignItems: 'center', borderRadius: '5%' }}>
          <img src="https://pub-cdn-oss.chuangkit.com/materials/2024/12/17/fb239c61-e933-4dc1-9658-88b177ac7d44" alt="" style={{ width: "0 auto", height: 'auto', maxWidth: '80%', maxHeight: '70%' }}/>
        </div>
      </>,
    }, {
      key: '6',
      label: '古风元素',
      children: <>
        <div style={{ width: "18%", float: 'left', height: '280px', background: '#f5f7fd', margin: '0.7rem', display: 'flex', justifyContent: 'center', alignItems: 'center', borderRadius: '5%' }}>
          <img src="https://pub-cdn-oss.chuangkit.com/material_kind/material_third_kind/background_image/554?imageMogr2%2Fthumbnail%2F600x%3E%2Fformat%2Fwebp" alt="" style={{ width: "0 auto", height: 'auto', maxWidth: '80%', maxHeight: '70%' }}/>
        </div>
         <div style={{ width: "18%", float: 'left', height: '280px', background: '#f5f7fd', margin: '0.7rem', display: 'flex', justifyContent: 'center', alignItems: 'center', borderRadius: '5%' }}>
          <img src="https://pub-cdn-oss.chuangkit.com/materials/2024/09/14/665a1b80-e667-4af8-b6a8-46a3a8c2eccd" alt="" style={{ width: "0 auto", height: 'auto', maxWidth: '80%', maxHeight: '70%' }}/>
        </div>
         <div style={{ width: "18%", float: 'left', height: '280px', background: '#f5f7fd', margin: '0.7rem', display: 'flex', justifyContent: 'center', alignItems: 'center', borderRadius: '5%' }}>
          <img src="https://pub-cdn-oss.chuangkit.com/materials/2024/12/17/fb239c61-e933-4dc1-9658-88b177ac7d44" alt="" style={{ width: "0 auto", height: 'auto', maxWidth: '80%', maxHeight: '70%' }}/>
        </div>
         <div style={{ width: "18%", float: 'left', height: '280px', background: '#f5f7fd', margin: '0.7rem', display: 'flex', justifyContent: 'center', alignItems: 'center', borderRadius: '5%' }}>
          <img src="https://pub-cdn-oss.chuangkit.com/material_kind/material_third_kind/background_image/554?imageMogr2%2Fthumbnail%2F600x%3E%2Fformat%2Fwebp" alt="" style={{ width: "0 auto", height: 'auto', maxWidth: '80%', maxHeight: '70%' }}/>
        </div>
         <div style={{ width: "18%", float: 'left', height: '280px', background: '#f5f7fd', margin: '0.7rem', display: 'flex', justifyContent: 'center', alignItems: 'center', borderRadius: '5%' }}>
          <img src="https://pub-cdn-oss.chuangkit.com/materials/2024/12/17/fb239c61-e933-4dc1-9658-88b177ac7d44" alt="" style={{ width: "0 auto", height: 'auto', maxWidth: '80%', maxHeight: '70%' }}/>
        </div>
      </>,
    }, {
      key: '7',
      label: '社交媒体',
      children:<>
      <div style={{ width: "18%", float: 'left', height: '280px', background: '#f5f7fd', margin: '0.7rem', display: 'flex', justifyContent: 'center', alignItems: 'center', borderRadius: '5%' }}>
          <img src="https://pub-cdn-oss.chuangkit.com/material_kind/material_third_kind/background_image/391?imageMogr2%2Fthumbnail%2F600x%3E%2Fformat%2Fwebp" alt="" style={{ width: "0 auto", height: 'auto', maxWidth: '80%', maxHeight: '70%' }}/>
        </div>
         <div style={{ width: "18%", float: 'left', height: '280px', background: '#f5f7fd', margin: '0.7rem', display: 'flex', justifyContent: 'center', alignItems: 'center', borderRadius: '5%' }}>
          <img src="https://pub-cdn-oss.chuangkit.com/materials/2024/12/17/fb239c61-e933-4dc1-9658-88b177ac7d44" alt="" style={{ width: "0 auto", height: 'auto', maxWidth: '80%', maxHeight: '70%' }}/>
        </div>
         <div style={{ width: "18%", float: 'left', height: '280px', background: '#f5f7fd', margin: '0.7rem', display: 'flex', justifyContent: 'center', alignItems: 'center', borderRadius: '5%' }}>
          <img src="https://pub-cdn-oss.chuangkit.com/materials/2024/12/17/fb239c61-e933-4dc1-9658-88b177ac7d44" alt="" style={{ width: "0 auto", height: 'auto', maxWidth: '80%', maxHeight: '70%' }}/>
        </div>
         <div style={{ width: "18%", float: 'left', height: '280px', background: '#f5f7fd', margin: '0.7rem', display: 'flex', justifyContent: 'center', alignItems: 'center', borderRadius: '5%' }}>
          <img src="https://pub-cdn-oss.chuangkit.com/materials/2024/12/17/fb239c61-e933-4dc1-9658-88b177ac7d44" alt="" style={{ width: "0 auto", height: 'auto', maxWidth: '80%', maxHeight: '70%' }}/>
        </div>
         <div style={{ width: "18%", float: 'left', height: '280px', background: '#f5f7fd', margin: '0.7rem', display: 'flex', justifyContent: 'center', alignItems: 'center', borderRadius: '5%' }}>
          <img src="https://pub-cdn-oss.chuangkit.com/materials/2024/12/17/fb239c61-e933-4dc1-9658-88b177ac7d44" alt="" style={{ width: "0 auto", height: 'auto', maxWidth: '80%', maxHeight: '70%' }}/>
        </div>
      </>
    }, {
      key: '8',
      label: '立体元素',
      children: <>
      <div style={{ width: "18%", float: 'left', height: '280px', background: '#f5f7fd', margin: '0.7rem', display: 'flex', justifyContent: 'center', alignItems: 'center', borderRadius: '5%' }}>
          <img src="https://pub-cdn-oss.chuangkit.com/material_kind/material_third_kind/background_image/163?imageMogr2%2Fthumbnail%2F600x%3E%2Fformat%2Fwebp" alt="" style={{ width: "0 auto", height: 'auto', maxWidth: '80%', maxHeight: '70%' }}/>
        </div>
         <div style={{ width: "18%", float: 'left', height: '280px', background: '#f5f7fd', margin: '0.7rem', display: 'flex', justifyContent: 'center', alignItems: 'center', borderRadius: '5%' }}>
          <img src="https://pub-cdn-oss.chuangkit.com/materials/2024/12/17/fb239c61-e933-4dc1-9658-88b177ac7d44" alt="" style={{ width: "0 auto", height: 'auto', maxWidth: '80%', maxHeight: '70%' }}/>
        </div>
         <div style={{ width: "18%", float: 'left', height: '280px', background: '#f5f7fd', margin: '0.7rem', display: 'flex', justifyContent: 'center', alignItems: 'center', borderRadius: '5%' }}>
          <img src="https://pub-cdn-oss.chuangkit.com/materials/2024/12/17/fb239c61-e933-4dc1-9658-88b177ac7d44" alt="" style={{ width: "0 auto", height: 'auto', maxWidth: '80%', maxHeight: '70%' }}/>
        </div>
         <div style={{ width: "18%", float: 'left', height: '280px', background: '#f5f7fd', margin: '0.7rem', display: 'flex', justifyContent: 'center', alignItems: 'center', borderRadius: '5%' }}>
          <img src="https://pub-cdn-oss.chuangkit.com/materials/2024/12/17/fb239c61-e933-4dc1-9658-88b177ac7d44" alt="" style={{ width: "0 auto", height: 'auto', maxWidth: '80%', maxHeight: '70%' }}/>
        </div>
         <div style={{ width: "18%", float: 'left', height: '280px', background: '#f5f7fd', margin: '0.7rem', display: 'flex', justifyContent: 'center', alignItems: 'center', borderRadius: '5%' }}>
          <img src="https://pub-cdn-oss.chuangkit.com/materials/2024/12/17/fb239c61-e933-4dc1-9658-88b177ac7d44" alt="" style={{ width: "0 auto", height: 'auto', maxWidth: '80%', maxHeight: '70%' }}/>
        </div>
      </>
    },
  ];
  const onChange = (key) => {
    console.log(key);
  };
  return (
    <div>
      <Tabs cardBg='pink' defaultActiveKey="1" items={items} onChange={onChange} />
    </div>
  )
}

export default ImgTab
